<template lang="pug">
el-drawer.commonDrawer(
    title="套入模板"
    :visible.sync="visibleDialog"
    v-loading="loading"
    custom-class="commonDrawer"
    direction="rtl"
    size="1200px"
    destroy-on-close
    append-to-body
  )
   .drawer-content(@mouseover.prevent="drawerContentOver($event)")
     tab-student(:studentArr="studentArr" :isFixed="true" :isAddStudent="true" @addStudent="addStudent")
     .photo-content
      .photo-library
        .library-top
         .flex.justify-sb
          div 照片库
          div 上传
         .select-folder
          el-select(
            v-model="selectFolder" placeholder="请选择"
          )
            el-option(
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            )
        .list-img
          img(:src="item"
           v-for="(item, index) in listImg"
           @mousedown="handleDown($event, index)"
           @mouseup="handleUp($event, index)"
           :key="index")
          //- AImage(:url="item" v-for="(item, index) in listImg" :preview="false"  )
      .photo-list
       .list-c(
         v-for="(item, index) in dragImgArr"
        :key="index"
        )
         img(:src="item.url")
         .drag-img(
          v-if="item.isDrag"
          v-for="(itemD, indexD) in item.isDargArr"
          :key="indexD"
          :style="{transform: `rotate(${itemD.rotate})`, top: itemD.top, left: itemD.left, width: itemD.width, height:itemD.height}"
          @mouseover.stop="handleOver($event, index, indexD)")
           img(:src="itemD.url" v-if="itemD.isShowDrag" :style="{transform: `rotate(${itemD.rotateImg})`}")

     .drawer-footer.tr
      el-button.gradientVertical(size="large" round @click="submitHandle") 保存
      el-button.gradientVertical(size="large" round @click="submitHandle") 保存并发送
   addStudent(:visible.sync="chcekObj.visible" :isModal="false" title="发布对象" btnName="套入"  :studentArr="chcekObj.studentArr" @save="saveTag")
</template>
<script>
// import { mapGetters } from 'vuex'
// import { getDirList, dirSubmit, docSubmit } from '../api'

import AImage from '@/components/Basic/Image'
import TabStudent from '@/components/Basic/TabStudent/index.vue'
import addStudent from '@/components/Basic/addStudent'
export default {
  components: {
    AImage,
    TabStudent,
    addStudent
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    studentArr: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      loading: false,
      dragImgIndex: '', // 拖拽的是哪个图片下标
      isDragIimg: false, // 是否拖拽了图片
      options: [
        {
          value: '1',
          label: '教案文件夹'
        },
        {
          value: '2',
          label: '亲子文件夹'
        }
      ],
      chcekObj: {
        visible: false,
        studentArr: ['詹三', '李淑', '曹仁', '李三', '曹五', '李三2', '曹五2', '李三3', '曹五3']
      },
      selectFolder: '1',
      listImg: [
        'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-15_18-49-22-805.jpeg',
        'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-15_18-51-02-444.jpeg'
      ],
      dragImgArr: [
        {
          url: 'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-16_21-21-43-402.jpg',
          isDrag: true,
          isDargArr: [
            {
              width: '30%',
              height: '50%',
              top: '42%',
              left: '11%',
              rotate: '-3deg',
              url: '',
              rotateImg: '0deg',
              isShowDrag: false
            },
            {
              width: '30%',
              height: '43%',
              top: '49%',
              left: '54%',
              rotate: '4deg',
              rotateImg: '0deg',
              url: '',
              isShowDrag: false
            }
          ]
        },
        {
          url: 'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-16_21-21-12-406.png',
          isDrag: false
        }
      ],
      dragImg: [
        'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-15_18-49-22-805.jpeg'
      ]
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    $_handleCancel () {
      this.visibleDialog = false
    },
    handleDown (e, index) {
      this.dragImgIndex = index
      this.isDragIimg = true
      // alert(index)
      // window.addEventListener('mousemove', this.handlMove)
    },
    handleUp () {
      this.isDragIimg = false
    },
    // 悬浮在空白处时触发
    handleOver (e, index, indexD) {
      const { listImg, dragImgIndex, isDragIimg } = this
      // 避免在没有拖拽图片是触发
      if (!isDragIimg) { return }
      this.dragImgArr[index].isDargArr[indexD].url = listImg[dragImgIndex]
      this.dragImgArr[index].isDargArr[indexD].isShowDrag = true
      this.isDragIimg = false
    },
    submitHandle () {
      this.$message.success('保存成功')
      this.$_handleCancel()
    },
    drawerContentOver () {
      this.isDragIimg = false
    },
    addStudent () {
      this.chcekObj.visible = true
    },
    saveTag (data) {
      const datas = this.studentArr.concat(data)
      this.$emit('update:studentArr', [...new Set(datas)])
    }
  }
}
</script>
<style lang="scss" scoped>
.commonDrawer {
  ::v-deep .el-drawer__header {
    margin-bottom: 10px;
  }
}
.content{
  padding: 0 24px;
  overflow-y: auto;
}
.drawer-content {
  // display: flex;
  .photo-content {
    display: flex;
    padding-top: 100px;
  }
}
.photo-library {
  width: 170px;
  height: calc(80vh);
  position: absolute;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid rgba(153, 153, 153, 0.404);
  border-radius: 5px;
  z-index: 100;
  .library-top {
    position: fixed;
    // top: 0;
  }
  .list-img {
    margin-top: 90px;
    img {
      width: 100%;
    }
  }

  .select-folder {
    margin-top: 20px;
    ::v-deep .el-select {
        width: 150px;
    }
  }

}

  .photo-list {
    width: 100%;
    padding-left: 180px;
    .list-c {
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      .drag-img {
        // width: 260px;
        // height: 218px;
        position: absolute;
        overflow: hidden;
        border-radius: 20px;
        z-index: 100;
        // top: 208px;
        // left: 112px;
        //  -webkit-transform: rotate(-3deg);
        // -moz-transform: rotate(10deg);
        // -o-transform: rotate(10deg);
        // -ms-transform: rotate(10deg);
        // transform: rotate(10deg);
      }
    }

  }
</style>
